<!DOCTYPE html>
<html><head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
   	<title>Crafty - SpriteAnimation</title>
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css">
	<link rel="shortcut icon" href="../favicon.ico">
</head>
<body>
	<div id="header-background"> </div>
	<div id="page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png"> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			



<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">事件列表</a></li><li class="category">核心<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-c.html">Crafty.c()</a></li><li><a href="Crafty-clone.html">Crafty.clone()</a></li><li><a href="Crafty-defineField.html">Crafty.defineField()</a></li><li><a href="Crafty-e.html">Crafty.e()</a></li><li><a href="Crafty-extend.html">Crafty.extend()</a></li><li><a href="Crafty-frame.html">Crafty.frame()</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion()</a></li><li><a href="Crafty-init.html">Crafty.init()</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-pause.html">Crafty.pause()</a></li><li><a href="Crafty-s.html">Crafty.s()</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="AngularMotion.html">AngularMotion</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Crafty-raycast.html">Crafty.raycast()</a></li><li><a href="Crafty-rectManager.html">Crafty.rectManager</a></li><li><a href="Gravity.html">Gravity</a></li><li><a href="GroundAttacher.html">GroundAttacher</a></li><li><a href="Motion.html">Motion</a></li><li><a href="Supportable.html">Supportable</a></li></ul></li><li class="category">动画<ul class="category-list"><li><a href="Crafty-easing.html">Crafty.easing</a></li><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">资源<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset()</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-imageWhitelist.html">Crafty.imageWhitelist()</a></li><li><a href="Crafty-load.html">Crafty.load()</a></li><li><a href="Crafty-paths.html">Crafty.paths()</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets()</a></li></ul></li><li class="category">音频<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">控制器<ul class="category-list"><li><a href="Controllable.html">Controllable</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Jumper.html">Jumper</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">调试<ul class="category-list"><li><a href="Crafty-error.html">Crafty.error()</a></li><li><a href="Crafty-log.html">Crafty.log()</a></li><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidAreaMap.html">SolidAreaMap</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredAreaMap.html">WiredAreaMap</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">事件<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">游戏循环<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">图形<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor()</a></li><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-createLayer.html">Crafty.createLayer()</a></li><li><a href="Crafty-defaultShader.html">Crafty.defaultShader()</a></li><li><a href="Crafty-domHelper.html">Crafty.domHelper</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart()</a></li><li><a href="Crafty-sprite.html">Crafty.sprite()</a></li><li><a href="Crafty-WebGLShader.html">Crafty.WebGLShader()</a></li><li><a href="DOM.html">DOM</a></li><li><a href="DomLayer.html">DomLayer</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li><li><a href="WebGL.html">WebGL</a></li><li><a href="WebGLLayer.html">WebGLLayer</a></li></ul></li><li class="category">输入<ul class="category-list"><li><a href="AreaMap.html">AreaMap</a></li><li><a href="Button.html">Button</a></li><li><a href="Crafty-findPointerEventTargetByComponent.html">Crafty.findPointerEventTargetByComponent()</a></li><li><a href="Crafty-keyboardDispatch.html">Crafty.keyboardDispatch()</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-lastEvent.html">Crafty.lastEvent</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch()</a></li><li><a href="Crafty-mouseWheelDispatch.html">Crafty.mouseWheelDispatch()</a></li><li><a href="Crafty-multitouch.html">Crafty.multitouch()</a></li><li><a href="Crafty-selected.html">Crafty.selected</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch()</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="MouseDrag.html">MouseDrag</a></li><li><a href="Touch.html">Touch</a></li></ul></li><li class="category">杂项<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">模型<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">场景<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene()</a></li></ul></li><li class="category">舞台<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-scene.html">Crafty.scene()</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">工具<ul class="category-list"><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="doc-page"><h1>SpriteAnimation <span class="page-badge">组件</span></h1><div class="doclet" id="SpriteAnimation"><div class="triggered-events"><h4>事件</h4><div class="trigger-list"><dl class="trigger"><dt>StartAnimation <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {Reel}</span></span>]</span></dt><dd>当一个动画开始播放，或者从暂停状态被唤醒时触发</dd></dl><dl class="trigger"><dt>AnimationEnd <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { Reel }</span></span>]</span></dt><dd>当动画完成时触发</dd></dl><dl class="trigger"><dt>FrameChange <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { Reel }</span></span>]</span></dt><dd>每次当前卷的帧发生变化时触发。</dd></dl><dl class="trigger"><dt>ReelChange <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { Reel }</span></span>]</span></dt><dd>当卷轴改变时</dd></dl></div></div><span class="markdown"><p>用于精灵地图作为帧序列的精灵动画，必须应用于具有精灵地图组件的实体。 </p>
<p>要定义一个动画,参见 <code>reel</code> 方法。 要播放一个动画,参见 <code>animate</code> 方法。</p>
<p>卷轴是一个包含动画帧和动画当前状态的对象。卷轴对象具有以下属性：</p>
</span><dl class="parameter"><dt> id: (String) </dt><dd><span class="markdown"><p>卷轴的名字</p>
</span></dd></dl><dl class="parameter"><dt> frames: (Array) </dt><dd><span class="markdown"><p>一个帧序列，格式[xpos, ypos]</p>
</span></dd></dl><dl class="parameter"><dt> currentFrame: (Number) </dt><dd><span class="markdown"><p>当前帧的下标索引</p>
</span></dd></dl><dl class="parameter"><dt> easing: (Crafty.easing object) </dt><dd><span class="markdown"><p>处理动画内部进度的对象。</p>
</span></dd></dl><dl class="parameter"><dt> duration: (Number) </dt><dd><span class="markdown"><p>以毫秒为单位的持续时间。</p>
</span></dd></dl><span class="markdown"><p>许多与动画相关的事件都通过一个卷轴对象作为数据。典型情况下，以后可能被实体改变，应该被视为只读数据。如果您希望保存数据，请复制它。</p>
</span><div><h4>参见</h4><ul class="see-also-list"><li><a href="Crafty-sprite.html">Crafty.sprite</a></li></ul></div></div><div><h4>属性</h4><ul class="page-toc"><li><a href="#-animationSpeed">.animationSpeed</a></li></ul><h4>方法</h4><ul class="page-toc"><li><a href="#-animate">.animate()</a></li><li><a href="#-getReel">.getReel()</a></li><li><a href="#-isPlaying">.isPlaying()</a></li><li><a href="#-loops">.loops()</a></li><li><a href="#-pauseAnimation">.pauseAnimation()</a></li><li><a href="#-reel">.reel()</a></li><li><a href="#-reelPosition">.reelPosition()</a></li><li><a href="#-resetAnimation">.resetAnimation()</a></li><li><a href="#-resumeAnimation">.resumeAnimation()</a></li></ul><div class="doclet" id="-animationSpeed"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.animationSpeed</h2><span class="markdown"><p>动画的回放速度。此属性默认为1。</p>
</span></div><div class="doclet" id="-animate"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.animate()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.animate</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">reelId</span></span><span class="sig-seperator">]</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-noun"></span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">loopCount</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> reelId </dt><dd><span class="markdown"><p>要播放的动画卷轴的id。如果没有指定，则默认为当前卷。</p>
</span></dd></dl><dl class="parameter"><dt> loopCount </dt><dd><span class="markdown"><p>重复动画次数。使用- 1重复无限次。默认值为1。</p>
</span></dd></dl></div><span class="markdown"><p>要通过 <code>.reel(...)</code> 播放一个先前定义的卷轴，简单的传递名称就可以。如果你希望动画播放多次，请将次数作为附加参数传递。要让动画无限地重复，请传递 <code>-1</code>。</p>
<p>如果当前正在播放另一个动画，它将暂停。</p>
<p>这将始终从头开始播放动画。如果你希望从卷轴恢复当前状态，请使用<code>resumeAnimation()</code>.</p>
<p>一旦动画结束，它将保持在最后一帧。</p>
</span><div class="example"><h4>例子</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-comment">// Define a sprite-map component</span>
Crafty.sprite(<span class="hljs-number">16</span>, <span class="hljs-string">"images/sprite.png"</span>, {
    <span class="hljs-attr">PlayerSprite</span>: [<span class="hljs-number">0</span>,<span class="hljs-number">0</span>]
});

<span class="hljs-comment">// Play the animation across 20 frames (so each sprite in the 4 sprite animation should be seen for 5 frames) and repeat indefinitely</span>
Crafty.e(<span class="hljs-string">"2D, DOM, SpriteAnimation, PlayerSprite"</span>)
    .reel(<span class="hljs-string">'PlayerRunning'</span>, <span class="hljs-number">20</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">3</span>) <span class="hljs-comment">// setup animation</span>
    .animate(<span class="hljs-string">'PlayerRunning'</span>, <span class="hljs-number">-1</span>); <span class="hljs-comment">// start animation</span></code></pre></span></div></div><div class="doclet" id="-getReel"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.getReel()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Reel </span><span class="sig-noun">.getReel</span></span><span class="sig-seperator">()</span></code><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>当前卷，如果为 null 则没有活动的卷。</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Reel </span><span class="sig-noun">.getReel</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-noun">reelId</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> reelId </dt><dd><span class="markdown"><p>要获取卷的ID</p>
</span></dd></dl><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>指定的卷，不存在时返回 <code>undefined</code>。</p>
</span></dd></dl></div></div><div class="doclet" id="-isPlaying"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.isPlaying()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Boolean </span><span class="sig-noun">.isPlaying</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">reelId</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> reelId </dt><dd><span class="markdown"><p>我们希望检查的卷ID</p>
</span></dd></dl><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>当前动画状态</p>
</span></dd></dl></div><span class="markdown"><p>确定指定的动画当前是否正在播放。如果没有指定reelId，检查是否有任何动画在播放。</p>
</span><div class="example"><h4>例子</h4><span class="markdown"><pre><code class="hljs ">myEntity.isPlaying() <span class="hljs-comment">// is any animation playing</span>
myEntity.isPlaying(<span class="hljs-string">'PlayerRunning'</span>) <span class="hljs-comment">// is the PlayerRunning animation playing</span></code></pre></span></div></div><div class="doclet" id="-loops"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.loops()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.loops</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">loopCount</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> loopCount </dt><dd><span class="markdown"><p>播放动画的次数</p>
</span></dd></dl></div><span class="markdown"><p>设置动画将循环的次数。如果动画正在进行中调用，则当前状态将被视为第一个循环。</p>
</span><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Number </span><span class="sig-noun">.loops</span></span><span class="sig-seperator">()</span></code><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>已经播放的次数，如果没有卷处于激活则返回 0</p>
</span></dd></dl></div></div><div class="doclet" id="-pauseAnimation"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.pauseAnimation()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.pauseAnimation</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-noun">void</span></span><span class="sig-seperator">)</span></code></div><span class="markdown"><p>暂停当前正在运行的动画，如果没有动画在运行则什么也不做。</p>
</span></div><div class="doclet" id="-reel"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.reel()</h2><span class="markdown"><p>用于定义卷轴，改变活动卷轴，获取活动卷轴的ID。</p>
</span><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reel</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">reelId</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Duration </span><span class="sig-noun">duration</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">fromX</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">fromY</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">frameCount</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">rowLength</span></span><span class="sig-seperator">])</span></code><span class="markdown"><p>

通过在精灵表上的起始位置和结束位置来定义卷轴。 </p>
</span><dl class="parameter"><dt> reelId </dt><dd><span class="markdown"><p>正在创建的动画卷轴的ID</p>
</span></dd></dl><dl class="parameter"><dt> duration </dt><dd><span class="markdown"><p>动画的长度，单位为毫秒。</p>
</span></dd></dl><dl class="parameter"><dt> fromX </dt><dd><span class="markdown"><p>在精灵地图上的起始横坐标 <code>x</code>(x 是精灵地图中精灵的水平单位).</p>
</span></dd></dl><dl class="parameter"><dt> fromY </dt><dd><span class="markdown"><p>在精灵地图上的起始纵坐标 <code>y</code> (y 是精灵地图中精灵的纵向单位). 在动画中进行保持</p>
</span></dd></dl><dl class="parameter"><dt> frameCount </dt><dd><span class="markdown"><p>动画中序列帧的个数。如果是负数，动画会向后播放。</p>
</span></dd></dl><dl class="parameter"><dt> rowLength </dt><dd><span class="markdown"><p>精灵序列中的帧数。当到达当前行结束时，连续帧将自动换行到新行。这是一个可选参数，默认为 <code>Infinity</code>。</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reel</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">reelId</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Duration </span><span class="sig-noun">duration</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Array </span><span class="sig-noun">frames</span></span><span class="sig-seperator">)</span></code><span class="markdown"><p>通过制定的帧序列定义个卷</p>
</span><dl class="parameter"><dt> reelId </dt><dd><span class="markdown"><p>正在创建的动画卷轴的ID</p>
</span></dd></dl><dl class="parameter"><dt> duration </dt><dd><span class="markdown"><p>动画的长度，单位为毫秒</p>
</span></dd></dl><dl class="parameter"><dt> frames </dt><dd><span class="markdown"><p>含 <code>x</code> 和 <code>y</code> 值的序列帧数组：[ [ x1，y1 ]、[ x2，y2 ]，…]（分别在精灵地图的宽度/高度单位）。</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reel</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">reelId</span></span><span class="sig-seperator">)</span></code><span class="markdown"><p>切换到指定的卷轴。精灵将更新到卷轴的当前帧。</p>
</span><dl class="parameter"><dt> reelID </dt><dd><span class="markdown"><p>要切换到的ID</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Reel </span><span class="sig-noun">.reel</span></span><span class="sig-seperator">()</span></code><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>当前卷的ID</p>
</span></dd></dl></div><span class="markdown"><p>一种处理动画卷轴的方法。只能与 Crafty.sprite 方法创建的精灵一起工作。详见 Tween 组件的2D属性动画。</p>
<p>要设置一个动画卷轴，要传递卷轴的名称（用于稍后识别卷轴），或者是绝对精灵位置的数组，或者是精灵地图上的开始 x，精灵地图上的 y，然后是精灵地图上的结束 x。</p>
</span><div class="example"><h4>例子</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-comment">// Define a sprite-map component</span>
Crafty.sprite(<span class="hljs-number">16</span>, <span class="hljs-string">"images/sprite.png"</span>, {
    <span class="hljs-attr">PlayerSprite</span>: [<span class="hljs-number">0</span>,<span class="hljs-number">0</span>]
});

<span class="hljs-comment">// Define an animation on the second row of the sprite map (fromY = 1)</span>
<span class="hljs-comment">// from the left most sprite (fromX = 0) to the fourth sprite</span>
<span class="hljs-comment">// on that row (frameCount = 4), with a duration of 1 second</span>
Crafty.e(<span class="hljs-string">"2D, DOM, SpriteAnimation, PlayerSprite"</span>).reel(<span class="hljs-string">'PlayerRunning'</span>, <span class="hljs-number">1000</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">4</span>);

<span class="hljs-comment">// This is the same animation definition, but using the alternative method</span>
Crafty.e(<span class="hljs-string">"2D, DOM, SpriteAnimation, PlayerSprite"</span>).reel(<span class="hljs-string">'PlayerRunning'</span>, <span class="hljs-number">1000</span>, [[<span class="hljs-number">0</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">1</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">2</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">3</span>, <span class="hljs-number">1</span>]]);</code></pre></span></div></div><div class="doclet" id="-reelPosition"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.reelPosition()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reelPosition</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Integer </span><span class="sig-noun">position</span></span><span class="sig-seperator">)</span></code><span class="markdown"><p>按帧号设置当前卷轴的位置。</p>
</span><dl class="parameter"><dt> position </dt><dd><span class="markdown"><p>跳转到的帧。当前为零。负值从最后一帧返回。</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reelPosition</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">position</span></span><span class="sig-seperator">)</span></code><span class="markdown"><p>

以百分比进度设置当前卷的位置。 </p>
</span><dl class="parameter"><dt> position </dt><dd><span class="markdown"><p>0和1之间的非整数。</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reelPosition</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">position</span></span><span class="sig-seperator">)</span></code></div><span class="markdown"><p>跳转到指定位置。目前唯一接受的值是“end”，它将跳转到卷尾。</p>
</span><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Number </span><span class="sig-noun">.reelPosition</span></span><span class="sig-seperator">()</span></code><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>当前帧号</p>
</span></dd></dl></div></div><div class="doclet" id="-resetAnimation"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.resetAnimation()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.resetAnimation</span></span><span class="sig-seperator">()</span></code></div><span class="markdown"><p>将当前动画重置为初始状态。将循环数重置为最后指定值，默认值为1。</p>
<p>既不暂停也不恢复当前动画。</p>
</span></div><div class="doclet" id="-resumeAnimation"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.resumeAnimation()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.resumeAnimation</span></span><span class="sig-seperator">()</span></code></div><span class="markdown"><p>这将恢复当前卷轴动画的当前状态。如果一个卷轴已经播放，或没有当前卷轴，则没有任何效果。 </p>
</span></div></div></div></div></div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png">
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png">
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png">
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			© Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>


</body></html>